<template>
  <q-page padding>
    <div
      id="edit"
      contenteditable="true"
      @input="onInput"
      v-html="content"
    ></div>
  </q-page>
</template>

<script>
export default {
  name: 'HtmlEditable',
  data () {
    return {
      content: 'test content',
      timmer: null,
      savedRange: null
    }
  },
  methods: {
    onInput (e) {
      if (this.timmer) {
        window.clearTimeout(this.timmer)
      }
      this.timmer = window.setTimeout(() => {
        // save range
        this.savedRange = window.getSelection().getRangeAt(0)
        this.timmer = null
      }, 1000)
    }
  },
  watch: {
    async content (v) {
      // get the editable div
      // and focus it (vue will focus it automatically)
      var node = this.windowSelection
      node.removeAllRanges()
      node.addRange(this.savedRange)
    }
  }
}
</script>
